<template>
  <div id="cornerComment" v-if="detailVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>选择设备</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="别名" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入别名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">search</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">reset</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="commandList">
          <el-table-column label="序号" align="center" prop="id" width="90"/>
          <el-table-column label="设备名称" align="center" prop="name"/>
          <el-table-column label="操作" prop="roleSort" width="110" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" plain @click="chooseRule(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <div class="cornerComment-in-footer">
        <el-button size="small" @click="closePOpup">cancel</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {listDevice} from "@/api/system/device";

export default {
  props: ['visible'],
  name: "deviceDetail",
  data() {
    return {
      detailVisible: false,
      jsonList: [
        {
          key_name: '',
          value_name: '',
          type: 1,
          list: []
        }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
      total: 0,
      commandList:[]
    }
  },
  watch:{
    visible(){
      this.detailVisible = this.visible
      if(!this.visible){
      }else{
        this.getList();
      }
    }
  },
  methods: {
    getList(){
      this.loading = true;
      listDevice(this.queryParams).then(response => {
        this.commandList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    chooseRule(row){
      this.$emit('getDevice', row)
      this.closePOpup()
    },
    /** reset按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** search按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    closePOpup() {
      this.$emit('update:visible', false)
    },
  }
}
</script>

<style scoped>
.Json-list {
  border: 1px solid #eee;
  padding: 10px;
}

.Json-list-line {
  display: flex;
  align-items: center;
}

.w-150 {
  width: 150px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.cornerComment-in {
  width: 700px;
  height: 55%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.Json-small-list {
  background: #eee;
  padding: 10px;
  margin-top: 10px;
}
</style>
